<template>
	<card :userTravels="newUserTaavels"/>
	<view style="height: 200rpx;"></view>
</template>

<script setup lang="ts">
	import type { getTravelListByCategoryItemResponse } from "@/types/types-travel";
	import { ref } from "vue";
	import {onReachBottom,onLoad} from '@dcloudio/uni-app'
	import card from '@/components/card-flow.vue'
	import { getTravelListByCategoryAPI,getTravelListByAddressAndCategoryAPI } from '@/api/types-travel'
	const newUserTaavels = ref<getTravelListByCategoryItemResponse[]>([])
	const travelQuery = ref({query:'',type:'',address:''})
	onLoad(async(event)=>{
		console.log(event);
		travelQuery.value.query = event?.query
		travelQuery.value.type = event?.type
		travelQuery.value.address = event?.address
		wx.setNavigationBarTitle({title: event?.query})
		await queryTravel()
	})
	async function queryTravel(page = 1){
		if(travelQuery.value.type == '001'){
			const res = await getTravelListByCategoryAPI({keywords:travelQuery.value.query,page})
			console.log(res);
			newUserTaavels.value = [...newUserTaavels.value,...res.data]
		}else{
			const res = await getTravelListByAddressAndCategoryAPI({address:travelQuery.value.address,keywords:travelQuery.value.query,page})
			console.log(res);
			newUserTaavels.value = [...newUserTaavels.value,...res.data]
		}
	}
	// 上拉加载
	const page = ref(1)
	onReachBottom(async()=>{
		page.value++
		await queryTravel(page.value)
	})
</script>

<style>
</style>